<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chat</title>
    <link rel="stylesheet" href="/css/chat.css"/>
</head>
<body>

<div id="content">

    <div id="room-list"></div>

    <div id="message"></div>

    <form id="send-form">
        <input id="send-message"/>
        <input id="send-button" type="submit" value="Send"/>

        <div id="help">
            Chat commands:
            <ul>
                <li>Change nickname:<code>/nick [username]</code></li>
                <li>Join/Create room:<code>/join [room name]</code></li>
            </ul>
        </div>
    </form>


</div>

<script src="/socket.io/socket.io.js"></script>
<script src="/js/jquery-1.11.0.min.js"></script>
<script src="/js/chat.js"></script>
<script src="/js/chat_ui.js"></script>
<script>
    var socket=io.connect();
    $(function () {
        var chartApp=new Chat(socket);

        socket.on('nameResult', function (result) {
            var msg;
            if(result.success){
                msg = 'You are now know as '+ result.name + '.';
            }else{
                msg =result.mesg;
            }

            $('#message').append(divSystemContnetElement(msg));
        });

        socket.on('joinResult', function (result) {
            $('#room').text(result.room);
            $('#message').append(divSystemContnetElement('Room changed.'));
        });

        socket.on('message', function (msg) {
            var newElm = $('<div/>').text(msg.text);
            $('#message').append(newElm);
        });

        socket.on('rooms', function (rooms) {
            $('#room-list').empty();
            for(var room in rooms){
                room = room.substring(1,room.length);
                if(''!=room){
                    $('#room-list').append(divEscapedContentElement(room));
                }
            }
            $('#room-list div').on('click', function () {
                chatApp.processCmd('/join '+$(this).text());
                $('#send-message').focus();
            });
        });

        setInterval(function () {
            socket.emit('rooms');
        });

        $('#send-message').focus();

        $('#send-form').submit(function () {
            processUserInput(chatApp,socket);
            return false;
        });

    });
</script>
</body>
</html>